<template>
  <view class="nearby-stores-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <image src="@/img/车联网服务-03车辆维修-02附近门店_slices/搜索.png" class="search-icon"></image>
        <input 
          type="text" 
          placeholder="搜索" 
          class="search-placeholder"
          v-model="searchKeyword"
          @input="onSearchInput"
        />
      </view>
    </view>
    
    <!-- 排序选项 -->
    <view class="sort-section">
      <view class="sort-option" @click="toggleSortDropdown">
        <text class="sort-text">{{currentSortText}}</text>
        <text class="sort-arrow" :class="{ 'rotate': showSortDropdown }">▼</text>
      </view>
      
      <!-- 下拉框 -->
      <view class="sort-dropdown" v-if="showSortDropdown">
        <view 
          class="sort-item" 
          v-for="(item, index) in sortOptions" 
          :key="index"
          @click="selectSort(item)"
          :class="{ 'active': currentSortType === item.type }"
        >
          <text class="sort-item-text">{{item.text}}</text>
          <text class="sort-item-check" v-if="currentSortType === item.type">✓</text>
        </view>
      </view>
    </view>
    
    <!-- 门店列表 -->
    <view class="store-list">
      <view 
        class="store-item" 
        v-for="(item, index) in filteredAndSortedStoreList" 
        :key="index"
        @click="selectStore(item)"
      >
        <view class="store-thumbnail">
          <image src="@/img/车辆维修/维修厂1.jpeg" mode="aspectFill"></image>
        </view>
        
        <view class="store-info">
          <view class="store-header">
            <text class="store-name">{{item.name}}</text>
            <text class="store-distance">{{item.distance}}m</text>
          </view>
          
          <view class="store-rating">
            <view class="stars">
              <text class="star filled" v-for="i in item.rating" :key="i">★</text>
              <text class="star" v-for="i in (5 - item.rating)" :key="i + item.rating">★</text>
            </view>
            <text class="store-time">{{item.time}}</text>
            <text class="store-sales">销量: {{item.sales}}</text>
          </view>
          
          <view class="store-hours">营业时间: {{item.businessHours}}</view>
          <view class="store-address">{{item.address}}</view>
        </view>
      </view>
    </view>
    
    <!-- 底部提示 -->
    <view class="bottom-tip" v-if="filteredAndSortedStoreList.length === 0">
      <text>{{searchKeyword ? '未找到相关门店' : '暂无更多'}}</text>
    </view>
    <view class="bottom-tip" v-else>
      <text>暂无更多</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '', // 搜索关键词
      showSortDropdown: false, // 是否显示下拉框
      currentSortType: 'comprehensive', // 当前排序类型
      currentSortText: '综合排序', // 当前排序文本
      sortOptions: [
        { type: 'comprehensive', text: '综合排序' },
        { type: 'distance', text: '距离最近' },
        { type: 'rating', text: '评分最高' },
        { type: 'sales', text: '销量最高' }
      ],
      storeList: [
        {
          name: "伟业汽车维修厂(人民路店)",
          distance: 44,
          time: "3分",
          rating: 3,
          sales: 322,
          businessHours: "周一至周五 09:00-22:00",
          address: "山阳区人民中路32号",
          phone: "18893029302",
          longitude: 113.2145,
          latitude: 35.2478,
          image: "@/img/车辆维修/维修厂1.jpeg"
        },
        {
          name: "速修汽车服务中心",
          distance: 890,
          time: "8分",
          rating: 4,
          sales: 156,
          businessHours: "周一至周日 07:30-22:00",
          address: "解放区塔南路158号",
          phone: "18893029303",
          longitude: 113.2256,
          latitude: 35.2512,
          image: "@/img/车辆维修/维修厂1.jpeg"
        },
        {
          name: "专业汽车维修店",
          distance: 1200,
          time: "12分",
          rating: 5,
          sales: 89,
          businessHours: "周一至周日 08:00-21:00",
          address: "中站区解放西路45号",
          phone: "18893029304",
          longitude: 113.2356,
          latitude: 35.2612,
          image: "@/img/车辆维修/维修厂1.jpeg"
        },
        {
          name: "快速汽车维修中心",
          distance: 650,
          time: "6分",
          rating: 4,
          sales: 234,
          businessHours: "周一至周日 09:00-20:00",
          address: "马村区建设路78号",
          phone: "18893029305",
          longitude: 113.2156,
          latitude: 35.2488,
          image: "@/img/车辆维修/维修厂1.jpeg"
        },
        {
          name: "大众汽车维修厂",
          distance: 1200,
          time: "15分",
          rating: 4,
          sales: 189,
          businessHours: "周一至周日 08:30-21:30",
          address: "修武县人民路123号",
          phone: "18893029306",
          longitude: 113.2456,
          latitude: 35.2688,
          image: "@/img/车辆维修/维修厂1.jpeg"
        }
      ]
    }
  },
  
  computed: {
    // 过滤后的门店列表
    filteredStoreList() {
      if (!this.searchKeyword.trim()) {
        return this.storeList;
      }
      
      const keyword = this.searchKeyword.toLowerCase();
      return this.storeList.filter(store => {
        return store.name.toLowerCase().includes(keyword) ||
               store.address.toLowerCase().includes(keyword) ||
               store.businessHours.toLowerCase().includes(keyword);
      });
    },
    
    // 根据当前排序类型返回排序后的门店列表
    filteredAndSortedStoreList() {
      const list = [...this.filteredStoreList];
      
      switch (this.currentSortType) {
        case 'distance':
          // 按距离排序（近到远）
          return list.sort((a, b) => a.distance - b.distance);
        case 'rating':
          // 按评分排序（高到低）
          return list.sort((a, b) => b.rating - a.rating);
        case 'sales':
          // 按销量排序（高到低）
          return list.sort((a, b) => b.sales - a.sales);
        case 'comprehensive':
        default:
          // 综合排序（距离40% + 评分40% + 销量20%）
          return list.sort((a, b) => {
            const scoreA = this.calculateComprehensiveScore(a);
            const scoreB = this.calculateComprehensiveScore(b);
            return scoreB - scoreA;
          });
      }
    }
  },
  
  onLoad() {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: '附近门店'
    });
  },
  
  methods: {
    // 搜索输入处理
    onSearchInput() {
      // 搜索时关闭下拉框
      this.showSortDropdown = false;
    },
    
    // 计算综合评分
    calculateComprehensiveScore(store) {
      // 距离得分（距离越近得分越高，最大距离设为2000m）
      const distanceScore = Math.max(0, (2000 - store.distance) / 2000);
      
      // 评分得分（5星满分）
      const ratingScore = store.rating / 5;
      
      // 销量得分（假设最大销量为500）
      const salesScore = Math.min(1, store.sales / 500);
      
      // 综合得分：距离40% + 评分40% + 销量20%
      return distanceScore * 0.4 + ratingScore * 0.4 + salesScore * 0.2;
    },
    
    // 切换下拉框显示状态
    toggleSortDropdown() {
      this.showSortDropdown = !this.showSortDropdown;
    },
    
    // 选择排序方式
    selectSort(sortOption) {
      this.currentSortType = sortOption.type;
      this.currentSortText = sortOption.text;
      this.showSortDropdown = false; // 关闭下拉框
    },
    
    selectStore(store) {
      // 跳转到门店详情页面
      uni.navigateTo({
        url: `/pages/storeDetails/storeDetails?storeData=${encodeURIComponent(JSON.stringify(store))}`,
        success: () => {
          console.log('跳转到门店详情页面成功');
        },
        fail: (err) => {
          console.error('跳转到门店详情页面失败：', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.nearby-stores-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 搜索栏样式 */
.search-bar {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 20rpx;
  padding: 15rpx 20rpx;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 15rpx;
  flex-shrink: 0;
}

.search-placeholder {
  flex: 1;
  font-size: 28rpx;
  color: #999;
}

/* 排序区域样式 */
.sort-section {
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: relative;
  z-index: 100;
}

.sort-option {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.sort-text {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.sort-arrow {
  font-size: 24rpx;
  color: #999;
  transition: transform 0.3s ease;
}

.sort-arrow.rotate {
  transform: rotate(180deg);
}

/* 下拉框样式 */
.sort-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  z-index: 101;
}

.sort-item {
  padding: 25rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f5f5f5;
  cursor: pointer;
}

.sort-item:last-child {
  border-bottom: none;
}

.sort-item.active {
  background-color: #f8f8f8;
}

.sort-item-text {
  font-size: 28rpx;
  color: #333;
}

.sort-item-check {
  font-size: 28rpx;
  color: #007AFF;
  font-weight: bold;
}

/* 门店列表样式 */
.store-list {
  padding: 0 30rpx;
}

.store-item {
  background-color: #fff;
  border-radius: 15rpx;
  margin: 20rpx 0;
  padding: 25rpx;
  display: flex;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.store-thumbnail {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-right: 25rpx;
  flex-shrink: 0;
}

.store-thumbnail image {
  width: 100%;
  height: 100%;
}

.store-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.store-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15rpx;
}

.store-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.3;
  flex: 1;
  margin-right: 20rpx;
}

.store-distance {
  font-size: 28rpx;
  color: #007AFF;
  font-weight: bold;
}

.store-rating {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.stars {
  display: flex;
  margin-right: 15rpx;
}

.star {
  font-size: 24rpx;
  color: #ddd;
  margin-right: 3rpx;
}

.star.filled {
  color: #FFD700;
}

.store-time {
  font-size: 24rpx;
  color: #666;
  margin-right: 20rpx;
}

.store-sales {
  font-size: 24rpx;
  color: #666;
}

.store-hours {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.store-address {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
}

/* 底部提示样式 */
.bottom-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 26rpx;
}
</style>
